<template>
  <div>
    <h4>用户管理</h4>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-button type="success" size="medium">+ 添加</el-button>
        <el-button type="primary" @click="excel()" size="medium">↓ 导出</el-button>
      </el-col>
      <el-col :span="4">
        <el-tree default-expand-all :data="deptList" :props="{children: 'children',label: 'deptName',value:'deptId'}"
                 @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="20">
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="email"
              label="邮箱"
              width="180">
          </el-table-column>
          <el-table-column
              prop="nickName"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="phonenumber"
              label="电话">
          </el-table-column>
          <el-table-column
              label="编辑">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="showDialog(scope.row.userId)">修改</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <UserEdit :editUserId="editUserId" v-if="dialogFormVisible"
                @changeDialogFormVisible="dialogFormVisible=false,loadData()" v-model="dialogFormVisible"/>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/util/request";
import UserEdit from "@/components/pages/UserEdit";

export default {
  name: "UserList",
  components: {UserEdit},
  data() {
    return {
      editUserId: 0,

      tableData: [],
      deptList: [],
      dialogFormVisible: false,
    }
  },
  async created() {
    this.loadData();
    this.deptList = await request("dept/tree")
  }, methods: {
    async loadData() {
      let data = await request("user?page=1&size=10");
      this.tableData = data.list;
    },
    async handleNodeClick(n) {
      this.tableData = await request("user?deptId=" + n.deptId)
    },
    showDialog(id) {
      this.editUserId = id
      this.dialogFormVisible = true
    },
    excel() {
      location.href = "http://localhost:8080/user/excel"
    }
  }
}
</script>

<style scoped>

</style>